<template>
  <div>
    <div
      class="wrap"
      :style="'top:' + navHeight"
      ref="element"
      v-if="allowSearch"
    >
      <van-search
        class="common_search"
        @search="confirm"
        @clear="clear"
        v-model="searchVal"
        :placeholder="placeholder"
        :maxlength="maxlength"
      />
    </div>
    <div ref="elementTap">
      <template v-if="showTab">
        <van-tabs
          v-model="active"
          @change="change"
          title-active-color="#00c1de"
        >
          <div
            v-for="(item, index) in this.tabData"
            :key="index"
          >
            <van-tab :title="item.title">
              <slot
                v-if="isCustom"
                name="tabContent"
              ></slot>
              <template v-else>
                <div v-if="filterTab1">
                  <van-dropdown-menu
                    class="filterdrop"
                    v-if="isView"
                    active-color="#00c1de"
                    style="background-color:#fff;margin:5px 10px"
                  >
                    <van-dropdown-item
                      v-for="(item, index) in filterParams"
                      :key="index"
                      :options="item.data"
                      @change="handleChange($event,item)"
                      :title="item.title"
                    />

                  </van-dropdown-menu>
                </div>
                <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="loadMore"
                >
                  <slot />
                </van-list>
              </template>
            </van-tab>
          </div>
        </van-tabs>
      </template>
      <van-list
        v-if="!showTab && !isCustom"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="loadMore"
      >
        <slot />
      </van-list>
      <slot
        v-if="!showTab && isCustom"
        name="content"
      ></slot>
    </div>
  </div>
</template>
<script>
import { deepClone } from "@/utils";
export default {
  name: "eaglelist",
  props: {
    showTab: {
      type: Boolean,
      default: () => false,
    },
    tabData: {
      type: Array,
      default: () => [],
    },
    isCustom: {
      type: Boolean,
      default: () => false,
    },
    filterTab: {
      type: Boolean,
      default: false,
    },
    filterParams: {
      type: Array,
      default: () => [],
    },
    filterParamsDefaul: {
      type: Array,
      default: () => [],
    },
    // filterParamsDefaul: {
    //   type: String,
    //   default: "",
    // },
    activeFilter: {
      type: Array,
      default: () => [],
    },
    isBeforeSearch: {
      type: Boolean,
      default: false,
    },
    value: {
      type: [Number, String],
      default: "",
    },
    placeholder: {
      type: String,
      default: "搜索",
    },
    maxlength: {
      type: [Number, String],
      default: 100,
    },
    allowSearch: {
      type: Boolean,
      default: false,
    },
    //预置条件
    _conditions:{
      type:String,
      default:''
    },
    //设置搜索的默认 Name
    _conditions_search_name:{
      type:String,
      default:'keywords'
    }
  },
  data() {
    return {
      first: false,
      loading: false,
      finished: false,
      active: 0,
      localParams: [],
      selFilterParams: [],
      conditions: [],
      isView: false,
      searchVal: "",
      navHeight: 0,
      filterTab1: false,
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(newSearchVal) {
        this.searchVal = newSearchVal;
      },
    },
    searchVal(newVal, oldVal) {
      this.$emit("input", newVal);
    },
  },
  created() {
    this.first = true;
    console.log(this._conditions)
    if (this.filterTab) {
      this.filterTab1 = true;
    }
    if (this.tabData.length > 0) {
      for (let i = 0; i < this.tabData.length; i++) {
        this.localParams.push({
          active: i,
          url: this.tabData[i].url,
          params: this.tabData[i].params,
          isPage: this.tabData[i].isPage,
          cnt: "",
        });
      }
      if (this.isBeforeSearch) {
        this.$emit("beforeSearch");
      } else {
        if (this.filterTab && this.filterParamsDefaul) {
          this.handleChange(this.filterParamsDefaul, this.filterParams);
          //this.handleChange(this.filterParamsDefaul, this.filterParams[0]);
        } else {
          this.getList();
        }
      }
    } else {
      this.loading = false;
      this.finished = true;
    }
  },
  mounted() {
    if (this.allowSearch) {
      this.navHeight =
        document.getElementsByClassName("van-nav-bar")[0].offsetHeight + "px";
      this.listPaddingTop = window.getComputedStyle(this.$refs.element).height;
      this.listPaddingTap =
        Number(this.listPaddingTop.replace("px", "")) +
        Number(
          window
            .getComputedStyle(this.$refs.elementTap)
            .height.replace("px", "")
        );
    }
  },
  methods: {
    onLoad() {
      this.loading = false;
      setTimeout(() => {
        this.finished = true;
      }, 500);
    },
    change() {
      this.$emit("initActive", this.active);
      this.loading = false;
      this.finished = true;
      var list = [];
      this.clear();
      //this.getList();
    },
    handleChange(value, data) {
      // this.selFilterParams = deepClone(this.filterParams);
      // this.selFilterParams.filter((item) => {
      //   item.data = item.data.filter((it) => {
      //     return it.value === value;
      //   });
      //   data.title = item.data[0].text;
      //   return item;
      // });
      console.log("sssss")
      console.log(value)
      console.log(data)
      if (data.length > 0) {
        var selFilterParams = [];
        selFilterParams = this.selFilterParams;
        this.selFilterParams = deepClone(this.filterParams);
        var i = 0;
        var j = 0;
        this.selFilterParams.filter((item) => {
          if (item.name == data[i].name) {
            if (value[j]) {
              if (value[j].name == item.name) {
                item.data = item.data.filter((it) => {
                  return it.value === value[j].value;
                });
              } else {
                j--;
              }
            }

            if (item.data.length > 0) {
              data[i].title = item.data[0].text;
            }
          } else if (selFilterParams.length > 0) {
            item.data = selFilterParams[i].data;
          }
          i++;
          j++;
          return item;
        });
        this.changeSerach();
      } else {
        var selFilterParams = [];
        selFilterParams = this.selFilterParams;
        this.selFilterParams = deepClone(this.filterParams);
        var i = 0;
        this.selFilterParams.filter((item) => {
          if (item.name == data.name) {
            item.data = item.data.filter((it) => {
              return it.value === value;
            });
            if (item.data.length > 0) {
              data.title = item.data[0].text;
            }
          } else if (selFilterParams.length > 0) {
            item.data = selFilterParams[i].data;
          }
          i++;
          return item;
        });
        this.changeSerach();
      }
    },
    isFilter() {
      if (this.activeFilter.length == 0) {
        return true;
      }
      let myActiveArr = this.activeFilter.filter((item) => {
        return item.active == this.active;
      });
      if (myActiveArr.length == 0) {
        return true;
      }
      return myActiveArr[0].filter;
    },
    clear() {
      this.searchVal = "";
      this.localParams[this.active].params.page = 0;
      this.localParams[this.active].params.conditions = [];
      this.confirm();
    },
    confirm() {
      this.changeSerach();
    },
    changeSerach() {
      this.localParams[this.active].params.page = 0;
      let hasKeywords = "keywords" in this.localParams[this.active].params;
      if (hasKeywords) {
        this.localParams[this.active].params.keywords = this.searchVal;
      }
      
      this.conditions = [];
      if (this.searchVal && !hasKeywords) {
        this.conditions.push({
          Name: this._conditions_search_name,
          DisplayName: this.searchVal,
          Value: this.searchVal,
          Operator: "like",
          DataType: "String",
        });
      }
      if (this.isFilter()) {
        this.selFilterParams.forEach((condition) => {
          if (condition.data[0] && condition.data[0].value) {
            this.conditions.push({
              Name: condition.name,
              DisplayName: condition.data[0] && condition.data[0].text,
              Value: condition.data[0] && condition.data[0].value,
              Operator: "=",
              DataType: condition.dataType ? condition.dataType : "String",
            });
          }
        });
      }
      this.localParams[this.active].params.conditions = JSON.stringify(
        this.conditions
      );
      this.getList();
    },
    getList() {
      var activeItem = this.localParams[this.active];
      if(this._conditions&&this._conditions!=''){
        console.log(activeItem.params)
        if(!activeItem.params.conditions||activeItem.params.conditions=='[]'){
          activeItem.params.conditions=this._conditions
          console.log(activeItem.params)
        }else{
          let Temp_condition=JSON.parse( activeItem.params.conditions)
          JSON.parse(this._conditions).forEach(element => {
            Temp_condition.push(element)
          });
          activeItem.params.conditions=JSON.stringify(Temp_condition)
        }
      }
      this.isView = this.filterTab && this.isFilter();
      if (activeItem.isPage) {
        this.loading = false;
        this.finished = false;
        this.getPageList(activeItem);
      } else {
        this.loading = false;
        this.finished = true;
        this.getNoPageList(activeItem);
      }
    },
    changefilterTab(value) {
      this.filterTab1;
      if (value == true) {
        this.filterTab1 = true;
      } else {
        this.filterTab1 = false;
      }
    },
    getNoPageList(activeItem) {
      let _this = this;
      _this.$axios
        .get(activeItem.url, { params: this.localParams[this.active].params })
        .then((res) => {
          _this.loading = false;
          _this.finished = true;
          var list = res.data;
          _this.$emit("bindData", list);
        })
        .catch((err) => {
          console.log("err", err);
          _this.finished = true;
        });
    },
    getPageList(activeItem) {
      this.loading = true;
      let _this = this;
      _this.$axios
        .get(activeItem.url, { params: activeItem.params })
        .then((res) => {
          _this.loading = false;
          if (!res.data.HasNextPage) {
            _this.finished = true;
          } else {
            _this.finished = false;
          }
          _this.list = res.data.Data;
          //   this.count = res.data.TotalCount > 99 ? "99+" : res.data.TotalCount;
          if (_this.localParams[this.active].badge) {
            _this.localParams[this.active].cnt =
              res.data.TotalCount > 99 ? "99+" : res.data.TotalCount;
          } else {
            _this.localParams[_this.active].cnt = "";
          }
          _this.localParams.forEach((item) => {
            if (!item.badge) {
            }
          });
          _this.localParams[_this.active].params.page = res.data.PageIndex;
          _this.$emit("bindData", _this.list);
          _this.first = false;
        })
        .catch((err) => {
          console.log("err", err);
          _this.finished = true;
        });
    },
    loadMore() {
      let _this = this;
      if (!_this.first) {
        _this.loading = true;
        ++_this.localParams[_this.active].params.page;
        _this.$axios
          .get(_this.localParams[this.active].url, {
            params: _this.localParams[_this.active].params,
          })
          .then((res) => {
            _this.loading = false;
            _this.localParams[_this.active].params.page = res.data.PageIndex;
            _this.list = _this.list.concat(res.data.Data);
            if (!res.data.HasNextPage) {
              _this.finished = true;
            }
            _this.$emit("bindData", _this.list);
          })
          .catch((err) => {
            console.log("err", err);
            _this.finished = true;
          });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.filterdrop .van-dropdown-menu__bar {
  background-color: #fff !important;
}

/deep/ .van-tabs__wrap {
  margin: 0px 10px;
}

/deep/ .van-dropdown-menu__bar {
  background-color: #fff;
}

/deep/ .van-dropdown-item {
  margin: 0 10px !important;
}
</style>